<template>
  <div class="question">
    <div class="content" v-if="isInit">
      <div class="title">{{index+1}}.{{!!questions[index].is_reload ? questions[index].paragraph : questions[index].question}}</div>
      <div class="mint-radiolist">
        <group> 
          <radio :options="questions[index].answer_list" @on-change="select"></radio>
        </group>
      </div>

      <x-button type="primary" :disabled="!answer" @click.native="submit">提交</x-button>
      
      <ul class="tab-bar">
        <div class="sent" @click.stop="goBack">
          <i class="icon-sent"/>
        </div>
        <li class="index">
          <i class="icon-price"/> {{student.gold_coin}}
        </li>
        <li class="index">
          <i class="icon-count"/> {{student.word_count}}
        </li>
      </ul>
    </div>
    <div class="init" v-else>
      <div>
        <div>总题数：{{questions.length}}题</div><br/>
        <div>可获金币：{{totalJinbi}}</div>
        <br/><br/><br/>
        开始答题 {{loading}}
      </div>
    </div>

    <div v-show="popupVisible" class="popup">
      <div class="content">
        <div class="msg">{{!!questions[index].is_correct ? '恭喜您，回答正确' : '很遗憾，答题错误'}}</div>
        <!-- <div>你已回答：<span>{{index + 1}}</span>题</div> -->
        <div>累计答对：<span>{{correctCount}}</span>题</div>
        <div>获得金幣：{{jinbi}} 个</div>
        <div class="action">
          <x-button v-if="!questions[index].is_correct && !questions[index].is_reload" type="primary" @click.native="reload">解析</x-button>
          <x-button type="primary" v-if="questions.length > index + 1" @click.native="next">下一题</x-button>
          <x-button type="primary" v-if="questions.length == index + 1" @click.native="finish">完成答题</x-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { Group, Radio, XButton } from "vux";

export default {
  components: { Group, Radio, XButton },
  data() {
    return {
      questions: [
        {
          question: "",
          is_reload: false, //是否已解析
          is_correct: false //是否答题正确
        }
      ],
      chapter: {},
      answer: "", //当前选中答案，用于判断是否可以提交
      index: 0,
      correctCount: 0,
      totalJinbi: 0,
      jinbi: 0, //金幣數
      isInit: false,
      loading: 3,
      timer: 60,
      popupVisible: false
    };
  },
  props: {},
  methods: {
    select(id) {
      this.answer = id;
      //将回答结果添加到问题上
      this.questions[this.index].is_correct = this.questions[
        this.index
      ].answer_list.filter(answer => answer.key == id)[0].is_correct;
    },
    submit() {
      const questions = [...this.questions]
        .splice(0, 1 + this.index)
        .filter(item => !!item.is_correct);
      this.correctCount = questions.length;
      this.popupVisible = true;
      //若這裡答對問題數量為0則不用計算金幣，銀幣數量
      if (questions.length == 0) return;
      this.jinbi = questions
        .map(item => item.gold_coin)
        .reduce((a, b) => a + b);
    },
    reload() {
      //给当前问题添加一个is_reload字段判断该问题是否已经解析过，若已解析过将不可在进行解析
      this.questions[this.index].is_reload = true;
      this.popupVisible = false;
    },
    next() {
      this.popupVisible = false;
      this.answer = "";
      this.index += 1;
    },
    finish() {
      this.$$api_book_update_student_chapter({
        data: {
          chapter_id: this.$router.currentRoute.query.id,
          student_id: this.student.id,
          data: {
            get_gold_coin: this.jinbi, //金幣數
            finish_question: true, //完成答题，用于判断是否可以再次进入答题页
            correct_count: [...this.questions].filter(item => !!item.is_correct)
              .length,
            total_count: [...this.questions].length
          }
        }
      });
      //修改文章所获金币数
      this.$$api_book_update_student_books_gold({
        data: {
          book_id: this.chapter.book_id,
          student_id: this.student.id,
          get_gold_coin: this.jinbi - (this.chapter.get_gold_coin || 0)
        }
      });
      //修改该学生所获金币总数
      this.$$api_user_update_student_gold({
        data: {
          student_id: this.student.id,
          get_gold_coin: this.jinbi - (this.chapter.get_gold_coin || 0)
        },
        fn: res => {
          //更新学生信息
          this.$$api_user_query_default_student({
            data: this.userID,
            fn: student =>
              this.$store.dispatch("update_default_student", student)
          });
        }
      });
      this.$router.replace("/find");
    },
    goBack() {
      this.$router.replace("/find");
    }
  },
  filters: {},
  computed: {
    ...mapGetters(["userID", "student"])
  },
  created() {},
  mounted() {
    this.$$api_book_find_student_chapter({
      data: {
        chapter_id: this.$router.currentRoute.query.id,
        student_id: this.student.id
      },
      fn: res => {
        this.chapter = res;
        console.log("this.chapter:", this.chapter);
      }
    });
    this.$$api_question_questionList({
      data: this.$router.currentRoute.query.id,
      fn: res => {
        if (res.length == 0) return;
        this.totalJinbi =
          res.length == 1
            ? res[0].gold_coin
            : res.reduce((a, b) => a.gold_coin + b.gold_coin);
        this.questions = res.map(item => ({
          ...item,
          answer_list: item.answer_list.map(answer => ({
            ...answer,
            value: answer.answer,
            key: answer.answer
          }))
        }));
      }
    });
    const init = setInterval(() => {
      if (this.loading == 0) {
        clearInterval(init);
        this.isInit = true;
      }
      this.loading -= 1;
    }, 1000);
  },
  destroyed() {}
};
</script>

<style lang="scss">
@import "~@/assets/scss/const.scss";
@import "~@/assets/scss/mixin.scss";

.question {
  background: $app-background-color;
  .init {
    height: 100vh;
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .content {
    color: #c4c4c4;
    padding-bottom: 60px;
    .title {
      padding: 40px 13px 20px;
      color: #737373;
    }
    button {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 30px;
      line-height: 30px;
      font-size: 14px;
      width: 80px;
      border-radius: 30px;
      margin: 0 auto;
      margin-top: 40px;
    }
  }

  .tab-bar {
    @include onepx();
    position: fixed;
    z-index: 100;
    bottom: 0;
    width: 100%;
    height: 50px;
    text-align: center;
    display: flex;
    flex-direction: row;
    background-color: #ffffff;
    // box-shadow: 0px 1px 10px 1px #888;
    .sent {
      width: 48px;
      font-size: 30px;
      color: #65acdf;
      line-height: 42px;
      border-right: 1px solid rgba(7, 17, 27, 0.1);
    }
    li {
      flex: 1;
      // color: #999;
      display: block;
      color: #65acdf;
      line-height: 50px;
      i {
        font-size: 18px;
      }
      span {
        display: block;
        font-size: 12px;
      }
      &:first-child {
        border-right: 1px solid rgba(7, 17, 27, 0.1);
      }
    }

    li.router-link-active {
      color: #018cfc;
      transform: scale(1.1);
    }
  }

  .icon-back {
    position: fixed;
    top: 10px;
    left: 10px;
    font-size: 40px;
    color: #999999;
  }
  .popup {
    width: 100%;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 30%;
    .content {
      background: #ffffff;
      position: relative;
      text-align: center;
      width: 80%;
      border-radius: 30px;
      box-shadow: 0px 4px 24px 0px rgba(216, 216, 216, 0.5);
      min-height: 200px;
      .msg {
        margin-top: 30px;
        font-size: 14px;
        color: black;
      }
      > div {
        color: #aaaaaa;
        font-size: 12px;
        line-height: 30px;
      }
      .action {
        @include onepx();
        position: absolute;
        z-index: 100;
        bottom: 0;
        width: 100%;
        height: 50px;
        text-align: center;
        display: flex;
        flex-direction: row;
        button {
          margin: 0;
          height: 50px;
          line-height: 50px;
          flex: 1;
          display: block;
          color: #5d666e;
          background: transparent;
        }
      }
    }
  }
}
</style>

